import React, { memo } from "react";
import { Form, Input, Button, Select, message } from 'antd';
import { citys } from '../../../../common/citys'
import { vPhone, vName } from '../../../../common/validator'
import { addAwardDeclare } from '../../../../services/home'
export default memo(function ExplainForm(props) {
    const { awardId } = props
    const [form] = Form.useForm();
    const onReset = () => {
        form.resetFields();
    };
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const { Option } = Select;
    const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };
    const onFinish = (values) => {
        addAwardDeclare({ ...values, ...{ awardId, status: 0 } }).then(res => {
            message.success(res.data)
            onReset()
        })
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div style={{ width: '60%', marginTop: '30px' }}>
            <Form
                {...layout}
                name="basic"
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    label="成果名称"
                    name="productionName"
                    rules={[{ required: true, message: '请输入成果名称!' }]}
                >
                    <Input placeholder='请输入成果名称' />
                </Form.Item>

                <Form.Item
                    label="申报单位"
                    name="companyName"
                    rules={[{ required: true, message: '请输入申报单位!' }]}
                >
                    <Input placeholder='请输入申报单位' />
                </Form.Item>
                <Form.Item
                    label="单位所在省份"
                    name="companyAddress"
                    rules={[{ required: true, message: '请选择所在省份!' }]}
                >
                    <Select placeholder="请选择所在省份">
                        {citys.map(item => {
                            return (
                                <Option value={item.name} key={item.name}>{item.name}</Option>
                            )
                        })}
                    </Select>
                </Form.Item>
                <Form.Item
                    label="联系人"
                    name="name"
                    rules={[{ required: true, message: '请输入联系人!' }, {
                        validator: vName,
                    }]}
                >
                    <Input placeholder='请输入联系人' />
                </Form.Item>
                <Form.Item
                    label="手机号"
                    name="contactPhone"
                    rules={[{ required: true, message: '请输入手机号!' }, {
                        validator: vPhone,
                    }]}
                >
                    <Input placeholder='请输入手机号' />
                </Form.Item>
                <Form.Item {...tailLayout}>
                    <div style={{ textAlign: 'center' }}>
                        <Button type="primary" htmlType="submit">
                            立即申报
                        </Button>
                    </div>
                </Form.Item>
            </Form>
        </div>
    )
})
